<template>
	<view class="page_wrapper">
		<view class="menus_block bottom_line">
			<view class="menu zero" @click="changeMenu('zero')" :class="{'active' : currentMenu === 'zero'}">学前班</view>
			<view class="menu one" @click="changeMenu('one')" :class="{'active' : currentMenu === 'one'}">一年级</view>
			<view class="menu two" @click="changeMenu('two')" :class="{'active' : currentMenu === 'two'}">二年级</view>
			<!-- <view class="menu three">三年级</view>
			<view class="menu four">四年级</view>
			<view class="menu five">五年级</view> -->
		</view>
		<view class="exams_block" v-show="currentMenu === 'zero'">
			<view class="exam_block" @tap="selectExam('0-5,+,0-5的加法')">
				<view class="left_block">
					<view class="radio_img" :class='{"active": (examType === "0-5,+,0-5的加法") }'></view>
				</view>
				<view class="right_block">
					<view class="exam_title">0-5的加法</view>
					<view class="exam_eg">例: 1+2=?</view>
				</view>
			</view>
			<view class="exam_block" @tap="selectExam('0-5,-,0-5的减法')">
				<view class="left_block">
					<view class="radio_img" :class='{"active": (examType === "0-5,-,0-5的减法") }'></view>
				</view>
				<view class="right_block">
					<view class="exam_title">0-5的减法</view>
					<view class="exam_eg">例: 3-1=?</view>
				</view>
			</view>
			<view class="exam_block" @tap="selectExam('0-5,+-,0-5的加减法')">
				<view class="left_block">
					<view class="radio_img" :class='{"active": (examType === "0-5,+-,0-5的加减法") }'></view>
				</view>
				<view class="right_block">
					<view class="exam_title">0-5的加减法</view>
					<view class="exam_eg">例: 1+2=?</view>
				</view>
			</view>
			<view class="exam_block" @tap="selectExam('0-10,+,0-10的加法')">
				<view class="left_block">
					<view class="radio_img" :class='{"active": (examType === "0-10,+,0-10的加法") }'></view>
				</view>
				<view class="right_block">
					<view class="exam_title">0-10的加法</view>
					<view class="exam_eg">例: 6+2=?</view>
				</view>
			</view>
			<view class="exam_block" @tap="selectExam('0-10,-,0-10的减法')">
				<view class="left_block">
					<view class="radio_img" :class='{"active": (examType === "0-10,-,0-10的减法") }'></view>
				</view>
				<view class="right_block">
					<view class="exam_title">0-10的减法</view>
					<view class="exam_eg">例: 9-4=?</view>
				</view>
			</view>
			<view class="exam_block" @tap="selectExam('0-10,+-,0-10的加减法')">
				<view class="left_block">
					<view class="radio_img" :class='{"active": (examType === "0-10,+-,0-10的加减法") }'></view>
				</view>
				<view class="right_block">
					<view class="exam_title">0-10的加减法</view>
					<view class="exam_eg">例: 3+2=?</view>
				</view>
			</view>
		</view>
		<view class="exams_block"  v-show="currentMenu === 'one'">
			<view class="exam_block" @tap="selectExam('synbjwjf,10以内进位加法')">
				<view class="left_block">
					<view class="radio_img" :class='{"active": (examType === "synbjwjf,10以内进位加法") }'></view>
				</view>
				<view class="right_block">
					<view class="exam_title">10以内进位加法</view>
					<view class="exam_eg">例: 1+2=?</view>
				</view>
			</view>
			<view class="exam_block" @tap="selectExam('esynbjwjf,20以内进位加法')">
				<view class="left_block">
					<view class="radio_img" :class='{"active": (examType === "esynbjwjf,20以内进位加法") }'></view>
				</view>
				<view class="right_block">
					<view class="exam_title">20以内进位加法</view>
					<view class="exam_eg">例: 1+2=?</view>
				</view>
			</view>
			<view class="exam_block" @tap="selectExam('esyntwjf,20以内退位减法')">
				<view class="left_block">
					<view class="radio_img" :class='{"active": (examType === "esyntwjf,20以内退位减法") }'></view>
				</view>
				<view class="right_block">
					<view class="exam_title">20以内退位减法</view>
					<view class="exam_eg">例: 1+2=?</view>
				</view>
			</view>
			<view class="exam_block" @tap="selectExam('0-100,+,100以内加法')">
				<view class="left_block">
					<view class="radio_img" :class='{"active": (examType === "0-100,+,100以内加法") }'></view>
				</view>
				<view class="right_block">
					<view class="exam_title">100以内加法</view>
					<view class="exam_eg">例: 30+50=?</view>
				</view>
			</view>
			<view class="exam_block" @tap="selectExam('0-100,-,100以内减法')">
				<view class="left_block">
					<view class="radio_img" :class='{"active": (examType === "0-100,-,100以内减法") }'></view>
				</view>
				<view class="right_block">
					<view class="exam_title">100以内减法</view>
					<view class="exam_eg">例: 80-30=?</view>
				</view>
			</view>
			<view class="exam_block" @tap="selectExam('0-100,+-,100以内加减法')">
				<view class="left_block">
					<view class="radio_img" :class='{"active": (examType === "0-100,+-,100以内加减法") }'></view>
				</view>
				<view class="right_block">
					<view class="exam_title">100以内加减法</view>
					<view class="exam_eg">例: 30+50=?</view>
				</view>
			</view>
		</view>
		<view class="exams_block"  v-show="currentMenu === 'two'">
			<view class="exam_block" @tap="selectExam('0-1000,+,1000以内加法')">
				<view class="left_block">
					<view class="radio_img" :class='{"active": (examType === "0-1000,+,1000以内加法") }'></view>
				</view>
				<view class="right_block">
					<view class="exam_title">1000以内加法</view>
					<view class="exam_eg">例: 300+500=?</view>
				</view>
			</view>
			<view class="exam_block" @tap="selectExam('0-1000,-,1000以内减法')">
				<view class="left_block">
					<view class="radio_img" :class='{"active": (examType === "0-1000,-,1000以内减法") }'></view>
				</view>
				<view class="right_block">
					<view class="exam_title">1000以内减法</view>
					<view class="exam_eg">例: 800-300=?</view>
				</view>
			</view>
			<view class="exam_block" @tap="selectExam('0-1000,+-,1000以内加减法')">
				<view class="left_block">
					<view class="radio_img" :class='{"active": (examType === "0-1000,+-,1000以内加减法") }'></view>
				</view>
				<view class="right_block">
					<view class="exam_title">1000以内加减法</view>
					<view class="exam_eg">例: 300+500=?</view>
				</view>
			</view>
		</view>
		<view class="btns_block">
			<picker @change="bindPickerChange" :value="index" :range="countArr">
				<view class="select_count">选择题量 : {{selectCount}}</view>
			</picker>
			<view class="download_btn" @click="generateMathExam()">生成试题</view>
		</view>
	</view>
</template>

<script>
	import {request} from '@/utils/request.js'
	export default {
		data() {
			return {
				currentMenu: 'zero',
				examType: '',
				selectCount: 10,
				countArr: [10, 20, 30, 40]
			}
		},
		methods: {
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.selectCount = this.countArr[e.detail.value]
			},
			
			changeMenu(menu) {
				this.currentMenu = menu
			},
			
			selectExam(examType) {
				this.examType = examType
			},
			
			examChanged(e) {
				console.log('exam changed')
				this.examType = e.detail.value
			},
			
			generateMathExam() {
				if(!this.examType) {
					uni.showToast({
						icon: 'none',
						title: '请先选择出题类型'
					})
					return false
				}
				this.loading = true
				
				uni.showLoading()
				request.post( 
					'/mathExams/ai', {
						'examType': this.examType,
						'totalCount': this.selectCount
					}
				).then(res => {
					uni.hideLoading()
					console.log(res)
					uni.navigateTo({
						url: '/pages/mathCalcs/mathCalcs?examId=' + res.id
					})
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page_wrapper{
		.menus_block{
			height: 50px;
			display: flex;
			align-items: center;
			overflow-x: auto; // 横向滚动
			.menu{
				flex: none;	// 宽度不被压缩
				height: 47px;
				line-height: 47px;
				margin-left: 10px;
				margin-right: 10px;
				padding-left: 10px;
				padding-right: 10px;
			}
			.menu.active{
				border-bottom: 3px solid #36ab60;
			}
		}
		
		.exams_block{
			flex: 1;
			overflow-y: scroll;
			margin: 20px;
			.exam_block{
				padding-top: 10px;
				padding-bottom: 10px;
				margin-bottom: 15px;
				display: flex;
				border: 1px solid #e2e2e2;
				border-radius: 5px;
				.left_block{
					width: 50px;
					display: flex;
					justify-content: center;
					align-items: center;
					.radio_img{
						width: 25px;
						height: 25px;
						background-image: url(@/static/images/radio.png);
						background-size: 25px 25px;
					}
					.radio_img.active{
						background-image: url(@/static/images/radio_sel.png);
					}
				}
				.right_block{
					flex: 1;
					.exam_title{
						font-size: 16px;
						font-weight: 400;
					}
					.exam_eg{
						font-size: 14px;
						color: #666666;
						margin-top: 2px;
						
					}
				}
			}
		}
		
		.btns_block{
			height: 60px;
			padding-left: 20px;
			padding-right: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			.select_count{
				width: 120px;
				height: 40px;
				border-radius: 5px;
				border: 1px solid #e2e2e2;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 15px;
			}
			.download_btn{
				flex: 1;
				height: 40px;
				color: white;
				background-color: #67C23A;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 5px;
			}
		}
	}
</style>
